import React, { Component} from 'react';
import { connect } from 'dva';
import { Card,Button,Modal,Input,Tooltip } from 'antd';
import { Link } from 'react-router-dom'
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const {TextArea} = Input

@connect((state,ownProps) => {
  const {articles:{entities}} = state
  const {match:{params:{id}}} = ownProps
  return {...entities[id]}
})
class Show extends Component{
  state = { visible: false,newTitle:'',newContent:'',title:'1',content:'',id:0 }
//第一次加载，执行一次

  componentWillMount(){
    const {match: {params:{id}}} = this.props
    const {id:payload} = this.props
    if(!payload){
      this.props.dispatch({
        type:'articles/fetchArticlesById',
        payload:id
      })
    }
  }

  componentDidMount(){
    this.setState({
      title: this.props.title,
      content:this.props.content,
      id:this.props.id,
      newTitle:this.props.title,
      newContent:this.props.content,
    })
  }

  componentWillReceiveProps(nextProps){
    console.log("propsUpdate");
    console.log(nextProps);
    this.setState({
      title: nextProps.title,
      content: nextProps.content,
      id:nextProps.id,
      newTitle:nextProps.title,
      newContent:nextProps.content,
    })
  }

  componentDidUpdate(prevProps){
    const {match:{params:{id:oldid}}} = prevProps
    const {match:{params:{id:newid}}} = this.props
    if(oldid&&newid&&newid!==oldid){
      console.log("tochange");
      this.props.dispatch({
        type:'articles/fetchArticlesById',
        payload:newid
      })
    }
  }

  showModal = () => {
   this.setState({
       visible: true,
     });
   }
   handleOk = (e) => {
     console.log(e);
     this.setState({
       visible: false,
       content:this.state.newContent,
       title:this.state.newTitle
     });
   }
   handleCancel = (e) => {
     console.log(e);
     this.setState({
       visible: false,
       newTitle:this.state.title,
       newContent:this.state.content
     });
   }

   handleTitleChange = (e) => {
     console.log(e.target.value);
     this.setState({
       newTitle:e.target.value
     })
   }

   handleContentChange = (e) =>{
     console.log(e.target.value);
     this.setState({
       newContent:e.target.value
     })
   }

  render(){
    const {id,title,content,onChange,newTitle,newContent} = this.state
    let url = "/articles/show/" + (id+1)
    return(
        <PageHeaderLayout title={title}>
          <Card bordered={true}>
            <div>
              <h2>{title}</h2>
              <p>{content}</p>
              <Button type="primary" onClick={this.showModal} style={{float:"right"}}>编辑</Button>
              <Link to={url}>到文章{id-121}</Link>
            </div>
          </Card>
          <Modal
            title="Basic Modal"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
          >
            <div>
              <TextArea ref="title" placeholder="请输入修改后的标题" autosize value={newTitle} onChange={this.handleTitleChange}/>
              <div style={{ margin: '24px 0' }} />
              <TextArea placeholder="请输入修改后的内容" autosize={{ minRows: 2, maxRows: 6 }} value={newContent} onChange={this.handleContentChange}/>
            </div>
          </Modal>
        </PageHeaderLayout>
    )
  }
}
export default Show
